
function ajax(url){
	return  new Promise(function(resolve,reject){
		var xhr = new XMLHttpRequest();
		xhr.open("GET",url);
		xhr.addEventListener("readystatechange",()=>{
			// 请求完全完成之后再判断状态码是否为200
			if(xhr.readyState == 4){
				if(xhr.status == 200){
					// 成功则调用 resolve
					resolve(JSON.parse(xhr.response));
				}else{
					// 失败则调用 reject
					reject("ajax失败");
				}
			} 
		})
		xhr.send();
	})
}


function loadAudio(src){
	let aud = document.createElement("audio");
	return new Promise((resolve,reject)=>{
		aud.addEventListener("canplay",()=>{
			resolve();
		})
		aud.src = src;
		// console.log(src);
	})
};

let skip = document.querySelector(".skip");
let loPage = document.querySelector(".loadingPage");
let buttonImg = document.querySelector(".but_img");
let homePage = document.querySelector(".homepage");
let audio = document.querySelector(".audiosrc");
let xxBox = document.querySelector(".audioBox");
let optionA = document.querySelector(".xxA_img");
let optionC = document.querySelector(".xx_C");
let optionD = document.querySelector(".xx_D");
let optionAll = document.querySelectorAll(".xz_text");
let overBox = document.querySelector(".overBox");
let ocjImg = document.querySelector(".ocj_img span");
let count;
let again = document.querySelector(".ozl_img");
let onoff = true;
let medal = document.querySelector(".oxz_img img")
let cjtext = document.querySelector(".ocf_img p")

ajax("js/music.json").then((res)=>{
	
	// 渲染选择文本
	res = res.sort(function(){
		return Math.random()-0.5;
	}).slice(0,30);
	console.log(res)
	
	// 声明一个空进度
	let loadSpan = document.querySelector(".loading span");
	
	var preload;
	var mainfest;
	let newData = res.map((e)=>{
		return e.audio;
	});
	console.log(newData)
	
	// 初始化预加载manifest清单
	function setupManifest() {
		mainfest = newData;
	}
	// 预加载函数
	function startPreload() {
		preload = new createjs.LoadQueue(true);
		//注意加载音频文件需要调用如下代码行
		preload.installPlugin(createjs.SOUND);
		//为preloaded添加整个队列变化时展示的进度事件
		preload.addEventListener("progress", handleFileProgress);
		//为preloaded添加当队列完成全部加载后触发事件
		preload.addEventListener("complete", loadComplete);
		//设置最大并发连接数  最大值为10
		preload.setMaxConnections(10);
		preload.loadManifest(mainfest);
	}
	
	// 当整个队列变化时展示的进度事件的处理函数
	function handleFileProgress(event) {
		loadSpan.innerText = (event.loaded*100).toFixed(0);
	}
	
	// 处理preload添加当队列完成全部加载后触发事件
	function loadComplete() {
		// 设置定时器，当全部加载完毕后让100%停留0.4秒，提高用户体验，不至于让用户感觉不到
		window.setTimeout(() => {
			console.log("全部加载完成")
			loPage.style.transition="all 1.5s";
			loPage.style.transform = "translateX(-100%)"
		}, 2000);
	}
	setupManifest();
	startPreload();
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	// 循环歌曲进行预加载
	// res.forEach((el,i)=>{
	// 	loadAudio(el.audio).then((e)=>{
	// 		loade++;
	// 		let progress = (loade/30*100).toFixed(0);
	// 		loadSpan.innerText = progress;
	// 		if(progress == 100){
	// 			loPage.style.transition="all 1.5s";
	// 			loPage.style.transform = "translateX(-100%)"
	// 		}
	// 	});
	// })
	return res;
}).then(res=>{
	//加载页点击跳过
	skip.addEventListener("click",function(){
		loPage.style.transition="all 1.5s";
		loPage.style.transform = "translateX(-100%)"
	});
	
	//点击隐藏
	buttonImg.addEventListener("click",function(){
		homePage.style.transition="all 1.5s";
		homePage.style.transform = "translateX(-100%)";
		console.log(audio)
		
		let grade = 0;
		let index = 0;
		
		// 渲染音频
		audio.src = res[index].audio
		console.log(res[index].audio)
		// 循环播放,自动播放
		audio.loop = true;
		audio.play(); 
		
		console.log(res);
		//渲染选项
		optionAll.forEach((e,i)=>{
			e.innerText = res[index].item[i]
			
			e.addEventListener("click",()=>{
				if(onoff){
					onoff = false;
					console.log(i);
					if(index == 29){
						overBox.style.transform = "translateX(0)"
						ocjImg.innerText = grade;
						if(grade <= 6){
							medal.src = "images/青铜.png"
							cjtext.innerText = "大佬!才这么点分?"
						}else if(grade > 6 && grade <= 12) {
							medal.src = "images/白银.png"
							cjtext.innerText = "比上次好一点,你个鶸!"
						}else if(grade > 12 && grade <= 18) {
							medal.src = "images/黄金.png"
							cjtext.innerText = "噢?竟然过了一半,恭喜你成为菜鸡!"
						}else if(grade > 18 && grade <= 24) {
							medal.src = "images/铂金.png"
							cjtext.innerText = "嗯?!竟然快要满分了!但还是菜鸡!"
						}else if(grade > 24 && grade == 30) {
							medal.src = "images/王者.png"
							cjtext.innerText = "不错噢!恭喜你今天成为一名萌新!"
						};
						return
					}else if(i == res[index].answer){
						console.log("正确+1")
						grade++;
					}
					
					index++
					// 点击之后重新渲染音频
					audio.src = res[index].audio
					console.log(res[index].audio)
					// 循环播放,自动播放
					audio.loop = true;
					audio.play();
					 //渲染下一首歌曲名字
					optionAll.forEach((e,i)=>{
						e.innerText = res[index].item[i]
					});
					setTimeout(()=>{
						onoff = true;
					},2000)
				}else{
					console.log("先听两秒")
				}
				console.log(grade)
			})
		})
		
		// 倒计时
		let optionText = document.querySelector(".xx_D span");
		count = setInterval(()=>{
			optionText.innerText--;
			if(optionText.innerText == 0){
				clearInterval(count)
				audio.pause();
				ocjImg.innerText = grade;
				overBox.style.transform = "translateX(0)"
				if(grade <= 6){
					medal.src = "images/青铜.png"
					cjtext.innerText = "大佬!才这么点分?"
				}else if(grade > 6 && grade <= 12) {
					medal.src = "images/白银.png"
					cjtext.innerText = "比上次好一点,你个鶸!"
				}else if(grade > 12 && grade <= 18) {
					medal.src = "images/黄金.png"
					cjtext.innerText = "噢?竟然过了一半,恭喜你成为菜鸡!"
				}else if(grade > 18 && grade <= 24) {
					medal.src = "images/铂金.png"
					cjtext.innerText = "嗯?!竟然快要满分了!但还是菜鸡!"
				}else if(grade > 24 && grade == 30) {
					medal.src = "images/王者.png"
					cjtext.innerText = "不错噢!恭喜你今天成为一名萌新!"
				};
			}
		},1000);
		
		// 轮播图
		var mySwiper = new Swiper('.swiper-container', {
			on: {
				init: function() {
					swiperAnimateCache(this); //隐藏动画元素 
					this.emit('slideChangeTransitionEnd'); //在初始化时触发一次slideChangeTransitionEnd事件
				},
				slideChangeTransitionEnd: function() {
					swiperAnimate(this); //每个slide切换结束时运行当前slide动画
					this.slides.eq(this.activeIndex).find('.ani').removeClass('ani'); //动画只展示一次
				}
			},
			autoplay:true,//等同于以下设置
			autoplay: {
				delay: 10000,
			},
		});
	});
	
	//游戏结束再来一次
	again.addEventListener("click",()=>{
		location.reload();
	})
	
})